<script setup>
import {ref,onMounted} from 'vue'
import qrious from 'qrious'
import html2canvas from 'html2canvas'

const props = defineProps({
  qrValue: {
    type: String,
    default: ''
  },
  qrBGcolor: {
    type: String,
    default: ''
  },
  qrBGalpha: {
    type: Number,
    default: 1
  },
  qrforecolor: {
    type: String,
    default: ''
  },
  qrforealpha: {
    type: Number,
    default: 1
  },
  qrlevel: {
    type: String,
    default: 'H'
  },
  qrsize: {
    type: Number,
    default: 0
  },
  qrpadding: {
    type: Number,
    default: 0
  },
  iconUrl: {
    type: String,
    default: ''
  },
})

const containerRef = ref(null);
const qrconRef = ref(null)
function saveQRCodeAsImage() {
  html2canvas(containerRef.value, {
    scale: 2
  }).then((canvas) => {
    const imgData = canvas.toDataURL('image/png')
    // 创建一个 <a> 标签用于下载
    const link = document.createElement('a');
    link.href = imgData;
    link.download = 'qrcode.png'; // 下载文件名
    link.click();
  })
}
onMounted(() => {
  const qr = new qrious({
    element: qrconRef.value,
    value: props.qrValue,
    background: props.qrBGcolor,
    backgroundAlpha: props.qrBGalpha,
    foreground: props.qrforecolor,
    foregroundAlpha: props.qrforealpha,
    level: props.qrlevel,
    size: props.qrsize,
    padding: 0,
  })
  console.log(props.qrsize);
  // 动态设置 --iconsize 为 qrsize 的 20%
  
  containerRef.value.style.setProperty('--containerbgcolor', props.qrBGcolor);
  const conpadding = (props.qrsize * 0.05) + 'px';
  containerRef.value.style.setProperty('--conpadding', conpadding);
  const consize = (props.qrsize * (1 + 0.05*2)) + 'px';
  containerRef.value.style.setProperty('--consize', consize);
  const qrsize = props.qrsize + 'px';
  containerRef.value.style.setProperty('--qrsize', qrsize);
  const iconleft = (props.qrsize * 0.7) + 'px';
  containerRef.value.style.setProperty('--iconleft', iconleft);
  const icontop = (props.qrsize * 0.75) + 'px';
  containerRef.value.style.setProperty('--icontop', icontop);
  const iconSize = (props.qrsize * 0.15) + 'px';
  containerRef.value.style.setProperty('--iconsize', iconSize);
})
</script>

<template>
  <div ref="containerRef" class="qrcontainer">
    <canvas ref="qrconRef" class="qrcon" :width="props.qrsize" :height="props.qrsize"></canvas>
    <img :src="iconUrl" alt="" class="icon">
  </div>
  <button @click="saveQRCodeAsImage">保存二维码</button>
</template>

<style lang="scss" scoped>
.qrcontainer {
  box-sizing: content-box;
  width: var(--consize);
  height: var(--consize);
  padding: 0;
  background-color: var(--containerbgcolor);
  position: relative;
  z-index: 0;
  .qrcon {
    width: var(--qrsize);
    height: var(--qrsize);
    position: absolute;
    // right: 0;
    // bottom: 0;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    background-color: var(--containerbgcolor);
    z-index: 1;
    border: 1px solid red;
  }
  .icon {
    width: var(--iconsize);
    height: var(--iconsize);
    padding: 0.5rem;
    background-color: var(--containerbgcolor);
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    border-radius: 20%;
    z-index: 3;
  }
}
</style>
